---
title: Configuration de l'éditeur de code
description: Configurer votre éditeur de code pour construire avec Astro.
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Customisez votre éditeur de code pour améliorer l'expérience de développement avec Astro et débloquer de nouvelles fonctionnalités.

## VS Code

[VS Code](https://code.visualstudio.com/) est un éditeur de code populaire pour les développeurs web, conçu par Microsoft. Le moteur de VS Code alimente également des éditeurs de code populaires dans le navigateur comme [GitHub Codespaces](https://github.com/features/codespaces) et [Gitpod](https://gitpod.io/).

Astro fonctionne avec n'importe quel éditeur decode. Cependant, VS Code est l'éditeur que nous recommandons pour les projets Astro. Nous maintenons une [extension Astro pour VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) officielle qui débloque plusieurs fonctionnalités clés et améliore l'expérience des développeurs pour les projets Astro.

- Coloration syntaxique pour les fichiers `.astro`.
- Informations sur le typage TypeScript pour les fichiers `.astro`.
- [Intellisense VS Code](https://code.visualstudio.com/docs/editor/intellisense) pour l'autocomplétion, les suggestions et plus.

Pour commencer, installez l'extension [Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) dès maintenant.

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Voir comment [configurer TypeScript](/fr/guides/typescript/) dans votre projet Astro.</ReadMore>

## JetBrains IDEs

Le support initial d'Astro est disponible dans WebStorm 2023.1. Vous pouvez installer le plugin officiel via [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) ou en recherchant "Astro" dans l'onglet Plugins de l'IDE. Ce plugin inclut des fonctionnalités telles que la coloration syntaxique, la complétion de code et le formatage, et prévoit d'ajouter des fonctionnalités encore plus avancées dans le futur. Il est également disponible pour tous les autres [JetBrains IDE avec support JavaScript](https://www.jetbrains.com/products/#lang=js&type=ide).


## Autres éditeurs de code

Notre incroyable communauté gère plusieurs extensions pour d'autres éditeurs populaires, notamment :

- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">Official</Badge></span> - L'extension officielle Astro VS Code, disponible sur le registre Open VSX pour les plateformes ouvertes telles que [VSCodium](https://vscodium.com/)
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique et la complétion de code pour Astro à l'intérieur de Nova
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique, l'indentation et le support de pliage de code pour Astro à l'intérieur de Vim ou Neovim.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Fournit la coloration syntaxique, l'analyse des repertoires et l'achèvement du code pour Astro dans Neovim.
- Emacs - Voir les instructions pour [Configurer Emacs et Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> pour travailler avec Astro
- [Coloration syntaxique Astro pour Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Le paquet Astro pour Sublime Text, disponible sur le gestionnaire de paquets de Sublime Text.

## Éditeur de code "In-Browser"

En plus des éditeurs locaux, Astro fonctionne aussi bien sur les éditeurs _"In-Browser"_ hébergés, comme :

- [StackBlitz](https://stackblitz.com/) et [CodeSandbox](https://codesandbox.io/) - des éditeurs en ligne qui s'exécutent dans votre navigateur, avec un support intégré de coloration syntaxique pour les fichiers `.astro`. Aucune installation ou configuration n'est nécessaire !
- [GitHub.dev](https://github.dev/)) - vous permet d'installer l'extension Astro VS Code en tant qu'[extension web](https://code.visualstudio.com/api/extension-guides/web-extensions), ce qui ne vous donne accès qu'à certaines des fonctionnalités complètes de l'extension. Actuellement, seule la coloration syntaxique est prise en charge.
- [Gitpod](https://gitpod.io/) - un environnement de développement complet dans le nuage qui peut installer l'extension officielle Astro VS Code d'Open VSX.

## Autres Outils

### ESLint

[ESLint](https://eslint.org/) est un linter populaire pour JavaScript et JSX. Pour la prise en charge d'Astro, [un plugin maintenu par la communauté](https://github.com/ota-meshi/eslint-plugin-astro) peut être installé.

Voir [le guide de l'utilisateur du projet](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) pour plus d'informations sur l'installation et la configuration d'ESLint pour votre projet.

### Stylelint

[Stylelint](https://stylelint.io/) est un linter populaire pour CSS. [Une configuration Stylelint maintenue par la communauté] (https://github.com/ota-meshi/stylelint-config-html) fournit un support Astro. 

Les instructions d'installation, l'intégration de l'éditeur et d'autres informations sont disponibles dans le README du projet.

### Prettier

[Prettier](https://prettier.io/) est un formateur populaire pour JavaScript, HTML, CSS, et plus encore. Si vous utilisez [Astro VS Code Extension] (https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) ou [le serveur de langage Astro dans un autre éditeur](#autres-éditeurs-de-code), le formatage du code avec Prettier est inclus.

Pour ajouter le support du formatage des fichiers `.astro` en dehors de l'éditeur (par exemple, CLI) ou dans des éditeurs qui ne supportent pas notre outil d'édition, installez [le plugin officiel Astro Prettier](https://github.com/withastro/prettier-plugin-astro).

Pour commencer, installez d'abord Prettier et le plugin :

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

Prettier détectera alors automatiquement le plugin et l'utilisera pour traiter les fichiers `.astro` lorsque vous le lancerez :

```shell
prettier --write .
```

Voir le [README du plugin Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) pour plus d'informations sur les options supportées, comment configurer Prettier dans VS Code, et plus encore.
